<!-- subpkg_consult/order_list/index.vue -->
<script setup lang="ts">
  import { ref } from 'vue'
  
  // 省略前面小节的代码...
  // 标签索引值
  const tabIndex = ref(0)
  // 标签页数据
  const orderTabs = ref([
    { label: '问医生', rendered: true },
    { label: '极速问诊', rendered: false },
    { label: '开药问诊', rendered: false },
  ])
  // 切换标签页
  function onOrderTabChange(i: number) {
    tabIndex.value = i
    // 每个标签页只被初始一次
    orderTabs.value[i].rendered = true
  }
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tabs :data="orderTabs" @change="onOrderTabChange"></custom-tabs>
    </view>

    <!-- 订单列表 -->
    <view v-for="(order, index) in orderTabs" :key="index" v-show="tabIndex === index">
      <order-list :type="index + 1" v-if="order.rendered" />
    </view>
  </view>
</template>